<!-- <template>
    <div class="box">
        <div class="box1">
            <div style="width:360px;height:20px;margin-bottom:45px;margin-left:15px;display:flex;margin-top:30px;justify-content: space-between;">
              <div><el-icon @click="onClickLeft"><ArrowLeft color="white" size="20"/></el-icon></div>
                <div><van-icon name="chat-o" dot color="white" size="20"/></div>
            </div>
            <div style="width:360px;height:20px;margin-left:15px;color:white">
                <h4 style="margin-bottom:4px">福岗园大厦</h4>
                <h4>周边“优选式”房源</h4>
            </div>


        </div>
        <div class="box2">
          <div style="width:360px;height:20px;margin-left:15px;margin-top:10px;margin-bottom:20px">
            <ul style="list-style:none;display:flex;justify-content: space-between;">
              <li v-for="i in lists" :key="i.id" :class="{ active: select === i.id}"
                @click="handleClick(i.id)"
              >

                {{ i.name }}
              </li>
            </ul>
          </div>
          <div style="width:360px;margin-left:15px;height:calc(844px - 190px)">
            <div v-for="i in filteredItems" :key="i.id" style="height:130px;display:flex;justify-content:space-evenly;margin-bottom:10px">
                <div><img :src="i.img" style="width:130px;height:90px"></div>
                <div style="margin-left:10px;">
                  
                  <p style="margin-bottom:10px">{{ i.zhi }}</p>
                  <p style="font-size:12px;margin-bottom:10px">{{ i.hu ==0 ? '1':i.hu==1 ? '2':i.hu==2 ? '3':''}}室 45.15m*{{ i.name }}</p>
                  <div style="margin-bottom:10px;color:#7d8abc;background-color:#edeff6;font-size:10px;width:34px;text-align:center">{{ i.you == 1 ? '邻地铁':i.you == 2 ? "有阳台":i.you == 3 ? '有电梯':i.you == 4 ? '精装修':'' }}</div>
                  <p style="color:#f57c00"><span style="font-weight:700">{{ i.price }}</span>元/月</p>
                </div>
            </div>





          </div>
        </div>










    </div>
  </template>
  
  <script setup lang="ts">
import { Icon } from 'vant';
import {ref,computed, onMounted} from 'vue'
import axios from 'axios'
import {useRouter,useRoute} from 'vue-router'
const route=useRoute()
 let lists=ref([
  {id:1,name:"邻地铁"},
  {id:2,name:'有阳台'},
  {id:3,name:"有电梯"},
  {id:4,name:'精装修'}
 ])
 const onClickLeft = () => history.back()
 const select=ref<number | null>(null)
  const handleClick=(selectId: number)=>{
  select.value=selectId
}
if(lists.value.length > 0){
  select.value = lists.value[0].id
}
let shou=ref([])
const getshou = ()=>{
  axios.get('shou').then(
    res=>{
      shou.value=res.data.shou
    }
  )
}
getshou()
const filteredItems = computed(()=>{
  if(select.value === null){
    return shou.value
  }
  return shou.value.filter(item=>item.you===select.value)
})

  </script>
  
  <style>
  *{
    margin:0px;
    padding:0px;
  }
  .box{
    width:390px;
    height:844px;
    position:relative;
  }
  .box1{
    width:390px;
    height:190px;
    background-image:url(../../assets/u557.png);
    background-size:cover; overflow:hidden;
    background-position:center;
  
  }
  .box2{
    width:390px;
    height:calc(844px - 190px);     
    position:absolute;
    top:168px;
    background-color:white;
    border-radius:15px 15px 0 0;
  }
  .active{
    color:#f57c00;
    border-bottom:3px solid #f57c00;
    font-weight: 700;
  }
  ul li{
    font-size: 14px;
    height:25px;
  }
  </style> -->
  <template>
    <div class="box">
      <div class="box1">
        <div style="width:360px;height:20px;margin-bottom:45px;margin-left:15px;display:flex;margin-top:30px;justify-content: space-between;">
          <div><el-icon @click="onClickLeft"><ArrowLeft color="white" size="20"/></el-icon></div>
          <div><van-icon name="chat-o" dot color="white" size="20"/></div>
        </div>
        <div style="width:360px;height:20px;margin-left:15px;color:white">
          <h4 style="margin-bottom:4px">福岗园大厦</h4>
          <h4>周边“优选式”房源</h4>
        </div>
      </div>
      <div class="box2">
        <div style="width:360px;height:20px;margin-left:15px;margin-top:10px;margin-bottom:20px">
          <ul style="list-style:none;display:flex;justify-content: space-between;">
            <li v-for="i in lists" :key="i.id" :class="{ active: select === i.id}"
                @click="handleClick(i.id)"
            >
              {{ i.name }}
            </li>
          </ul>
        </div>
        <div style="width:360px;margin-left:15px;height:calc(844px - 190px); overflow-y: auto;" ref="listRef">
          <div v-for="i in filteredItems" :key="i.id" style="height:130px;display:flex;justify-content:space-evenly;margin-bottom:10px">
            <!-- 使用自定义的 LazyImage 组件 -->
            <LazyImage :src="i.img" :alt="i.name" style="width:130px;height:90px" />
            <div style="margin-left:10px;">
              <p style="margin-bottom:10px">{{ i.zhi }}</p>
              <p style="font-size:12px;margin-bottom:10px">{{ i.hu ==0 ? '1':i.hu==1 ? '2':i.hu==2 ? '3':''}}室 45.15m*{{ i.name }}</p>
              <div style="margin-bottom:10px;color:#7d8abc;background-color:#edeff6;font-size:10px;width:34px;text-align:center">{{ i.you == 1 ? '邻地铁':i.you == 2 ? "有阳台":i.you == 3 ? '有电梯':i.you == 4 ? '精装修':'' }}</div>
              <p style="color:#f57c00"><span style="font-weight:700">{{ i.price }}</span>元/月</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { Icon } from 'vant';
  import { ref, computed, onMounted } from 'vue';
  import axios from '../../axios';
  import { useRouter, useRoute } from 'vue-router';
  import { useIntersectionObserver } from '@vueuse/core';
  
  const route = useRoute();
  const router = useRouter();
  
  let lists = ref([
    { id: 1, name: "邻地铁" },
    { id: 2, name: '有阳台' },
    { id: 3, name: "有电梯" },
    { id: 4, name: '精装修' }
  ]);
  
  const onClickLeft = () => history.back();
  const select = ref<number | null>(null);
  const handleClick = (selectId: number) => {
    select.value = selectId;
  };
  
  if (lists.value.length > 0) {
    select.value = lists.value[0].id;
  }
  
  let shou = ref([]);
  const getshou = () => {
    axios.get('/shou').then(
      res => {
        shou.value = res.data.shou;
      }
    );
  };
  getshou();
  
  const filteredItems = computed(() => {
    if (select.value === null) {
      return shou.value;
    }
    return shou.value.filter(item => item.you === select.value);
  });
  
  // 滚动容器的引用
  const listRef = ref<HTMLElement | null>(null);
  
  // 定义懒加载图片组件
  const LazyImage = {
    props: {
      src: {
        type: String,
        required: true
      },
      alt: {
        type: String,
        default: ''
      }
    },
    setup(props) {
      const imgRef = ref<HTMLImageElement | null>(null);
      const { stop } = useIntersectionObserver(
        imgRef,
        ([{ isIntersecting }]) => {
          if (isIntersecting) {
            if (imgRef.value) {
              imgRef.value.src = props.src;
            }
            stop(); // 停止观察
          }
        },
        {
          root: listRef.value,
          rootMargin: '90px',
          threshold: 0.1
        }
      );
  
      return {
        imgRef
      };
    },
    template: `
      <img ref="imgRef" :alt="alt" :style="style" />
    `
  };
  </script>
  
  <style scoped>
  * {
    margin: 0px;
    padding: 0px;
  }
  .box {
    width: 390px;
    height: 844px;
    position: relative;
  }
  .box1 {
    width: 390px;
    height: 190px;
    background-image: url(../../assets/u557.png);
    background-size: cover;
    overflow: hidden;
    background-position: center;
  }
  .box2 {
    width: 390px;
    height: calc(844px - 190px);
    position: absolute;
    top: 168px;
    background-color: white;
    border-radius: 15px 15px 0 0;
  }
  .active {
    color: #f57c00;
    border-bottom: 3px solid #f57c00;
    font-weight: 700;
  }
  ul li {
    font-size: 14px;
    height: 25px;
  }
  </style>
